<template>
	<view style="background-color: #ffffff;padding: 30rpx;">
		<view class="Answer" style="margin-top: 30rpx;">
			<view class="flex align-center">
				<view style="margin-right: 15rpx;font-size: 28rpx;width:130rpx">
					去评论
				</view>
				<input @click="comment()" type="text" v-model="comments" :placeholder="placeholder"
					style="font-size: 28rpx;color: #1E1E1EFF;border: 1rpx solid #1E1E1E1A;padding:30rpx;width:100%">
			</view>
		</view>
		<view v-if="commentData!=''" style="background: #ffffff;margin-top:40rpx;padding: 30rpx;">
			<view class="flex justify-between align-center" style="padding:26rpx 30rpx ;">
				<view style="color: #1E1E1E;font-size:32rpx;font-weight: 650;">热门评论<text
						style="color: #6AE39E;font-size: 24rpx;font-weight: 550;margin-left: 5rpx;">包含123条</text></view>
				<image src="../static/me/right.png" mode="" style="width: 17rpx;height: 17rpx;"></image>
			</view>
			<view style="padding:0 30rpx ;" v-for="(item,index) in commentData" :key="index">
				<view class="flex justify-between align-center" style="margin-top: 10rpx;">
					<view class="flex align-center">
						<u-avatar :src="item.avatar" size="50"></u-avatar>
						<view style="color: #492D22;font-size: 28rpx;margin-left: 20rpx;">{{item.username}}</view>
					</view>
					<view class="flex align-center">
						<image src="../clientEnd/static/5.png" mode="" style="width: 45rpx;height: 45rpx;"></image>
						<view style="color:#2F2F51;font-size: 28rpx;margin-left: 20rpx;">{{item.like}}</view>
					</view>
				</view>
				<view>
					<view @click="comment(item.id)" style="color: #1E1E1E;font-size: 28rpx;margin:25rpx 0 ;">
						{{item.comment}}
					</view>
					<view class="time">{{item.createTime}}</view>
					<view class="remarks" style="margin-top: 15rpx;" v-if="item.replayCommentList.length!=0">
						<view v-for="(items,index) in item.replayCommentList" v-if='index<2' :key="index" class="flex"
							style="flex-wrap: wrap;margin: 5rpx;">
							<view style="color: #00BBBCFF;font-size: 28rpx;">{{items.replayName}}</view>
							<view v-if="items.beReplayName" style="color: #1E1E1E;font-size: 28rpx;">回复
								<text style="color: #00BBBCFF;">{{items.beReplayName}}</text>
							</view>
							<text style="color: #1E1E1E;"> ：</text>
							<text style="color: #1E1E1E;font-size: 28rpx;" @click="comment(item.id,items.id)">
								{{items.replayContent}}
							</text>
						</view>
						<view style="color: #00BBBCFF;font-size: 28rpx;margin-top: 15rpx;" v-if="item.count>2"
							@click="reversion(item.id,item.username,item.createTime,item.comment,item.avatar)">
							共{{item.count}}条回复>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 更多评论弹出框 -->
		<uni-popup id="popup" ref="comment" type="bottom" :animation="true">
			<scroll-view class="uni_popup" scroll-y="true"
				style="padding: 0 30rpx 30rpx 30rpx;background-color: #fff;height: 752rpx;">
				<view>
					<view class="flex align-center justify-between" style="box-shadow:0 7px 5px -5px #F0F3FAFF;">
						<text style="font-size: 32rpx;text-align: center;">评论详情</text>
						<image style="width:64rpx;height:64rpx;margin:32rpx 0;" src="/clientEnd/static/7730.png" mode=""
							@tap="goBack"></image>
					</view>
					<view class="flex" style="margin-top: 30rpx;">
						<u-avatar :src="content.avatar" size="50"></u-avatar>
						<view style="margin-left: 50rpx;font-size: 28rpx; ">
							<h4 style="margin: 5rpx 0;color: #3a3a3a;">{{content.username}}</h4>
							<view style="margin: 5rpx 0;color: #3a3a3a;">{{content.createTime}}</view>
							<view @click="comment(content.id)" style="color: #1E1E1E;font-size: 32rpx;margin:25rpx 0 ;">
								{{content.comment}}
							</view>
						</view>
					</view>
				</view>
				<view class="remarks" style="margin-top: 15rpx;">
					<view v-for="(item,index) in commentDataMore" :key="index"
						style="padding: 15rpx  0;font-size: 28rpx;border-bottom: 1rpx solid #331E1E1E;">
						<view style="margin: 5rpx 0;color: #1E1E1E66;" class="flex justify-between">
							<text>{{item.replayName}}</text>
							<image v-if="name.userId == item.replayUsId" @click="moreOptions(item.id,content.id)"
								src="../static/tabbar/more.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
						</view>
						<view style="margin: 5rpx 0;color: #1E1E1E66;">{{item.createTime}}</view>
						<view class="flex" style="font-size: 32rpx;">
							<view v-if="item.beReplayName" style="color: #1E1E1E;font-size: 28rpx;">回复
								<text style="color: #00BBBCFF;margin-left: 5rpx;">@{{item.beReplayName}} ：</text>
							</view>
							<text style="color: #1E1E1E;" @click="comment(content.id,item.id)">
								{{item.replayContent}}
							</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</uni-popup>
		<!-- 添加评论弹出框 -->
		<uni-popup id="popup" ref="sheet" type="bottom" :animation="true">
			<view class="uni_popup">
				<view style="background-color: #fff;height: 600rpx;padding: 30rpx;">
					<input type="text" v-model="comments" :placeholder="placeholder"
						style="font-size: 36rpx;color: #1E1E1EFF;">
				</view>
				<view class="publish" @click="getComment(czId,replyId)">
					发布
				</view>
			</view>
		</uni-popup>
		<!-- 更多选择 -->
		<uni-popup ref="moreOptions" type="bottom" :animation="true">
			<view style="height: 300rpx;background-color: #F0F3FA;">
				<view @click="deleteComment(deleteId,cockloftId)" class="flex align-center"
					style="background-color: #fff;height: 120rpx;padding: 30rpx;">
					<image src="../static/tabbar/delete.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
					<text style="margin-left: 30rpx;">删除</text>
				</view>
				<view @click="deleteCom()"
					style="text-align: center;background-color: #fff;line-height: 80rpx;margin-top: 15rpx;padding: 30rpx;font-size: 32rpx;">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "comment",
		props: {
			name: {}
		},
		data() {
			return {
				placeholder: "评论千万条，友善第一条",
				// placeholder: "回复 猫儿爱健身",
				comments: '',
				commentData: [],
				commentDataMore: [],
				content: {
					username: '',
					createTime: '',
					comment: '',
					id: '',
					avatar: ''
				},
				itemId: '',
				type: '',
				czId: '',
				replyId: '',
				username: '',
				deleteId: '',
				cockloftId: '',
			}
		},
		created() {
			this.commentList()
		},
		methods: {
			// 更多选择-删除评论弹窗
			moreOptions(Id, cockloftId) {
				this.$refs.moreOptions.open()
				this.deleteId = Id
				this.cockloftId = cockloftId
				console.log('哈哈哈', this.deleteId)
			},
			deleteCom() {
				this.$refs.moreOptions.close()
			},
			// 关闭更多弹窗
			goBack() {
				this.$refs.comment.close()
			},
			//查看更多回复
			reversion(id, username, createTime, comment, avatar) {
				this.$refs.comment.open()
				this.content.username = username
				this.content.createTime = createTime
				this.content.comment = comment
				this.content.avatar = avatar
				this.content.id = id
				this.getCommentList(id)
			},
			getCommentList(id) {
				let data = {
					czId: id
				}
				this.$api.moreReply(data).then((res) => {
					res.data.result.forEach((item) => {
						item.createTime = this.$tools.fileTime(item.createTime)
					})
					this.commentDataMore = res.data.result;
				})
			},
			// 评论列表
			commentList(id) {
				this.commentData = []
				let datas = {
					czId: id
				}
				let data = {
					pageNo: 1,
					pageSize: 10,
					id: this.name.id,
					type: this.name.publishType
				}
				this.$api.publicList(data).then((res) => {
					res.data.result.list.forEach((item) => {
						item.createTime = this.$tools.fileTime(item.createTime)
					})
					this.commentData = res.data.result.list;
				})
			},
			// 添加评论
			getComment(czId, replyId) {
				if (this.name.publishType == 2) {
					this.type = 2
				}
				if (this.comments != '') {
					let data = {
						content: this.comments,
						itemId: this.name.id,
						type: this.type,
						czId: czId,
						replyId: replyId
					}
					this.$api.addComment(data).then((res) => {
						this.$refs.sheet.close()
						this.commentList()
						this.getCommentList(czId)
					})
				}
			},
			// 删除评论
			deleteComment(deleteId, cockloftId) {
				let data = {
					id: deleteId
				}
				this.$api.deleteComment(data).then((res) => {
					this.$refs.moreOptions.close()
					this.getCommentList(cockloftId)
				})
			},


			// 弹窗
			comment(id, Id) {
				this.$refs.sheet.open()
				this.comments = ''
				if (id != null) {
					this.czId = id
				} else {
					this.czId = ''
				}
				if (Id == null) {
					if (id != null) {
						this.replyId = id
					} else {
						this.replyId = ''
					}
				} else {
					this.replyId = Id
				}
			}
		}

	}
</script>

<style scoped>
	.remarks {
		background-color: rgba(73, 45, 34, 0.05);
		border-radius: 8rpx;
		padding: 30rpx;
	}

	.publish {
		text-align: right;
		color: #00BBBCFF;
		margin: 50rpx 0;
		padding: 30rpx;
	}

	.uni_popup {
		font-size: 36rpx;
		height: 800rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: #F0F3FAFF;
	}
</style>
